<template>
  <div class="home">
    <h1 class="page-title">最新医疗新闻</h1>
    
    <el-row :gutter="25" class="news-list">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="news in newsList" :key="news.id">
        <el-card class="news-item" shadow="hover" @click="goToDetail(news.id)">
          <div class="news-image">
            <el-image :src="news.image" fit="cover" style="width: 100%; height: 200px;"></el-image>
          </div>
          <div class="news-content">
            <h2 class="news-title">{{ news.title }}</h2>
            <p class="news-excerpt">{{ news.excerpt }}</p>
            <div class="news-meta">
              <span>{{ news.date }}</span>
              <span>来源：{{ news.source }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <h2 class="page-title">热门医疗资讯</h2>
    
    <el-row :gutter="20" class="hot-news-list">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" v-for="hotNews in hotNewsList" :key="hotNews.id">
        <el-card class="hot-news-item" shadow="hover" @click="goToDetail(hotNews.id)">
          <div class="news-image" style="position: relative;">
            <el-image :src="hotNews.image" fit="cover" style="width: 100%; height: 200px;"></el-image>
            <span class="hot-news-tag">{{ hotNews.tag }}</span>
          </div>
          <div class="news-content">
            <h2 class="news-title">{{ hotNews.title }}</h2>
            <div class="news-meta">
              <span>{{ hotNews.date }}</span>
              <span>阅读量：{{ hotNews.views }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    
    const newsList = ref([
      {
        id: 1,
        title: '国家卫健委发布最新疫情防控指南',
        excerpt: '国家卫生健康委员会近日发布了最新版新冠肺炎疫情防控指南，针对秋冬季可能出现的疫情反弹提出了更加细致的防控措施...',
        image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-10-15',
        source: '国家卫健委'
      },
      {
        id: 2,
        title: '人工智能助力医疗诊断准确率提升30%',
        excerpt: '最新研究表明，人工智能辅助诊断系统在多种疾病的早期筛查中表现出色，特别是在影像诊断领域，准确率比传统方法提高了30%...',
        image: 'https://images.unsplash.com/photo-1581056771107-24ca5f033842?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-10-12',
        source: '科技日报'
      },
      {
        id: 3,
        title: '新型流感疫苗开始全国范围接种',
        excerpt: '针对今年流行的流感病毒株，我国自主研发的新型四价流感疫苗已开始在全国范围内接种，专家建议高危人群尽早接种...',
        image: 'https://images.unsplash.com/photo-1505751172876-fa1923c5c528?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-10-08',
        source: '中国疾控中心'
      },
      {
        id: 4,
        title: '本市新建三甲医院预计明年投入使用',
        excerpt: '为缓解城东地区医疗资源紧张状况，市政府投资建设的第三人民医院新院区已完成主体工程，预计明年上半年正式投入使用...',
        image: 'https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-10-05',
        source: '地方日报'
      },
      {
        id: 5,
        title: '中医药在慢性病管理中发挥重要作用',
        excerpt: '最新临床研究显示，中医药在糖尿病、高血压等慢性病的长期管理中具有独特优势，能够显著改善患者生活质量并减少并发症...',
        image: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-09-28',
        source: '中医药报'
      },
      {
        id: 6,
        title: '国产高端医疗设备打破国外技术垄断',
        excerpt: '我国自主研发的3.0T超导磁共振成像系统获得医疗器械注册证，标志着我国在高场磁共振领域打破了国外厂商的长期垄断...',
        image: 'https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-09-25',
        source: '经济日报'
      }
    ])
    
    const hotNewsList = ref([
      {
        id: 'hot-1',
        title: '医保新政策：这些药品纳入报销范围',
        image: 'https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-10-10',
        views: '5.2万',
        tag: '热门'
      },
      {
        id: 'hot-2',
        title: '专家解读：秋冬季如何预防呼吸道疾病',
        image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-10-08',
        views: '4.8万',
        tag: '推荐'
      },
      {
        id: 'hot-3',
        title: '全国首家互联网医院用户突破100万',
        image: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
        date: '2023-10-05',
        views: '3.9万',
        tag: '热门'
      }
    ])
    
    const goToDetail = (id) => {
      router.push(`/news/${id}`)
    }
    
    return {
      newsList,
      hotNewsList,
      goToDetail
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #42b983;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.news-list {
  margin-bottom: 40px;
}

.news-item {
  margin-bottom: 25px;
  cursor: pointer;
  transition: transform 0.3s;
}

.news-item:hover {
  transform: translateY(-5px);
}

.news-content {
  padding: 20px;
}

.news-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.news-excerpt {
  color: #666;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 72px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 14px;
}

.hot-news-list {
  margin-bottom: 40px;
}

.hot-news-item {
  cursor: pointer;
}

.hot-news-tag {
  background-color: #ff5722;
  color: white;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 4px;
  position: absolute;
  top: 10px;
  left: 10px;
}

@media (max-width: 768px) {
  .news-list {
    grid-template-columns: 1fr;
  }
  
  .hot-news-list {
    grid-template-columns: 1fr;
  }
}
</style>